<!-- 干货集锦 -->
<template>
  <div>
      <my-header></my-header>
      <div class="w_1000">
          <div class="content">
            <el-row>
                <el-col :span="4">
                    <my-leftnav :nav='nav' @updateData="toChildShow"></my-leftnav>
                </el-col>
                <el-col :span="20" class="rightcontent">
                    <my-rightlist v-show="this.$store.state.islist"></my-rightlist>
                    <my-rightcontent v-show="!this.$store.state.islist"></my-rightcontent>
                </el-col>
            </el-row>
          </div>
          
      </div>
  </div>
</template>

<script>
//引入组建
import Header from "@/components/Header";
import LeftNav from "@/components/content/LeftNav";
import RightList from "@/components/content/RightList";
import RightContent from "@/components/content/RightContent";

import store from "@/store/modules/webnav/index";

import { ArticleList } from "@/api/data";



export default {
  data() {
    return {
      nav: {
        title: "干货集锦",
        data: [
          {
            id: "webpage",
            title: "前端",
            active: true
          },
          {
            id: "adminpage",
            title: "后台",
            active: false
          },
          {
            id: "replenish",
            title: "杂文",
            active: false
          }
        ]
      }
    };
  },
  store,
  mounted() {
    //数据初始化
    let json = new Object();
    json.id = this.nav.data[0].id;
    json.title = this.nav.data[0].title;
    this.$store.commit("toRightClick", json);

    //一级标题数据
    let title = this.nav.title;
    this.$store.commit("toRightLinktitle", title);
  },
  async created() {
      let json=new Object();
      json.islist=true;
      this.$store.commit("toRightContent",json);
    //异步首次加载数据
    let type = this.nav.data[0].id;
    let jsondata = new Object();
    jsondata.page = 1;
    jsondata.limit = 5;
    const res = await ArticleList(jsondata, type);
    if (res.code == 0) {
      this.$store.commit("toRightDataBind", res);
    }
  },
  /**计算属性 */
  computed: {},
  methods: {
    toChildShow(id) {
      let res = this.nav.data;
      for (let i = 0; i < res.length; i++) {
        if (res[i].id == id) {
          res[i].active = true;
        } else {
          res[i].active = false;
        }
      }

      this.nav.data = res;
      let json=new Object();
      json.islist=true;
      this.$store.commit("toRightContent",json);
    }
  },
  /** 组件注册 */
  components: {
    "my-header": Header,
    "my-leftnav": LeftNav,
    "my-rightlist": RightList,
    "my-rightcontent": RightContent
  }
};
</script>
<style scoped>
.rightcontent {
  border-left: 1px solid #eee;
}
</style>